#city-select {
  display: none;
  position: absolute;
  border: 2px solid #c9cbce;
  width: 370px;
  height: 370px;
  background: #ffffff;
  z-index: 999999;
  padding: 15px;
  overflow: auto;
}

.search {
  position: relative;
}

#search-city {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
}

#search-city .city-item {
  background: #fafafa;
  padding: 4px;
  z-index: 100;
}

#search-city .city-item:hover {
  cursor: pointer;
}

#city-select > p {
  font-weight: 900;
}

#city-select .search-city-input {
  display: block;
  width: 100%;
  outline: none;
  background: #fafafa;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  border: transparent;
  height: 27px;
  padding: 5px 4px;
  font-size: 16px;
}

#city-select .city-li .py-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#city-select .city-li .py-list .city-py {
  font-weight: 900;
}

#city-select .city-li .py-list .py-item {
  white-space: nowrap;
  box-sizing: border-box;
  margin-right: 10px;
  padding: 2px 4px;
  background: #fafafa;
}

#city-select .city-li .py-list .py-item a {
  line-height: 1.5;
  margin-right: 0;
}